<template>
  <div class="tpl46-hybird">
    
    <div
      class="modulePadding"
      :style="`padding-top:${tplItemData.modulePadding}px; padding-bottom:${tplItemData.modulePadding}px;`">
      <div class="hybird63 clearfix">
        <div class="header_img">
          <img :src="tplItemData.headerpic" alt="">
        </div>
        <div class="goods_info clearfix">
          <div class="triangle"></div>
          <div v-for="(item,index) in tplItemData.dataset" :key="index" class="goods_item">
            <a @click="openLink(item.link)">
              <div class="item_img">
                <img :src="item.pic" alt="">
              </div>
              <div class="item_txt">{{ item.showtitle }}</div>
            </a>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
  import Vue from 'vue'
  import { openPage } from '@/utils/utils'
  export default Vue.extend({
    name: 'index',
    props: {
      tplItemData: {
        type: Object
      }
    },
    methods: {
      openLink(link) {
        openPage(link)
      },
    }
  })
</script>

<style lang="scss">
  .tpl46-hybird{
    // 首页模板63
    .hybird63{
      overflow:hidden;
      border-radius:12px;
      .header_img{
        img{
          display:block;
          width:100%;
        }
      }
      .goods_info{
        position:relative;
        padding:30px 0 20px;
        background:#fff;
        .triangle{
          position:absolute;
          top:-32px;
          left:50%;
          margin-left:-16px;
          width:0;
          height:0;
          border:16px solid transparent;
          border-bottom-color:#fff;
        }
      }
      .goods_item{
        float:left;
        width:21%;
        margin:0 2%;
        img{
          display:block;
          width:100%;
        }
        .item_txt{
          margin-top:16px;
          font-size:24px;
          color:#333;
        }
      }
    }
  }
</style>
